.container {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.tui-searchbox {
	width: 100%;
	height: 92upx;
	padding: 0 30upx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 20upx;
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	z-index: 100;
	.tui-search-input {
		width: 100%;
		height: 60upx;
		background: #f1f1f1;
		border-radius: 30upx;
		font-size: 26upx;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
		.tui-search-text {
			padding-left: 16upx;
		}
	}
}

.tui-searchbox::after {
	content: '';
	position: absolute;
	border-bottom: 1upx solid #d2d2d2;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}
.tab-view {
	/* height: 100%; */
	width: 200upx;
	position: fixed;
	left: 0;
	z-index: 10;
	.tab-bar-item {
		width: 200upx;
		height: 110upx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		color: #444;
		font-weight: 400;
	}
	.active {
		position: relative;
		color: #000;
		font-size: 30upx;
		font-weight: 600;
		background: #fcfcfc;
	}
	.active::before {
		content: "";
		position: absolute;
		border-left: 8upx solid #E41F19;
		height: 30upx;
		left: 0;
	}
}

.right-box {
	width: 100%;
	position: fixed;
	padding-left: 220upx;
	box-sizing: border-box;
	left: 0;
	.page-view {
		width: 100%;
		overflow: hidden;
		padding-top: 20upx;
		padding-right: 20upx;
		box-sizing: border-box;
		padding-bottom: 10upx;
		.swiper {
			width: 100%;
			height: 220upx;
			border-radius: 12upx;
			overflow: hidden;
			transform: translateZ(0);
			.slide-image{
				width: 100%;
				height: 100%;
			}
		}
		.class-box {
			padding-top: 30upx;
			.class-item {
				background: #fff;
				width: 100%;
				box-sizing: border-box;
				padding: 20upx;
				margin-bottom: 20upx;
				border-radius: 12upx;
				.g-container {
					/* padding-top: 20upx; */
					display: flex;
					display: -webkit-flex;
					justify-content: flex-start;
					flex-direction: row;
					flex-wrap: wrap;
					.g-box {
						width: 33.3333%;
						text-align: center;
						padding-top: 40upx;
						.g-image {
							width: 120upx;
							height: 120upx;
						}
						.g-title {
							font-size: 22upx;
						}
					}
				}
			}
		}
	}
}

